<template>
	<view class="box">
		<!-- 占用空间 -->
		<view class="vh_top_bg"></view><!-- 占用空间 -->

		<view class="search_box">
			<view class="flex_box aic">
				<view class="re mr20 fs0" @tap="toBack">
					<image :lazy-load="true" src="/static/icon_arrow_7.png" class="img6"></image>
				</view>
				<view class="re item">
					<image :lazy-load="true" src="/static/icon_search.png" class="icon_search_pos"></image> <input
						type="text" v-model="name" @tap="toSearch" class="ipt_search" placeholder="请输入您想搜索的资料名称"
						placeholder-style="color: #353535" />
				</view>
				<view class="pl20 fs26 cor_fff" @tap="toSearch">搜索</view>
				<view class="pl20 df aic fs26 cor_fff" style="display: none;">
					<view>筛选</view>
					<image :lazy-load="true" src="/static/icon_screen_2.png" class="ml5 img5"></image>
				</view>
			</view>
		</view>

		<view class="menu_content_box_page">
			<view class="vh_bg"></view>
			<view class="pl15 pr15 pb25">

				<view class="area_block_1" style="margin-top: -70rpx;z-index: 2;">
					<view class="flex_box aic tac">
						<view class="item" v-for="item,index in typeList" :key="index" @tap="toClassify(item)">
							<view>
								<image :lazy-load="true" :src="item.icon" class="img23 vt"></image>
							</view>
							<view class="mt20 fs26 cor_000">{{item.name}}</view>
						</view>

					</view>
				</view>


				<view class="mt15 area_block_3" v-if="dataList.length > 0" v-for="li,key in dataList" :key="key"
					@tap="toDetail(li.id)">
					<view class="flex_box">
						<view class="re mr25">
							<image :lazy-load="true" :src="li.imgUrl" class="img17 vt"></image>
						</view>
						<view class="item">
							<view class="df fldc jcsb hp100">
								<view class="fs28 lh34 cor_333 ell">{{li.title}}</view>
								<view class="fs22 lh26 cor_808">{{li.introduce}}</view>
								<view class="flex_box aic">
									<view class="item">
										<view class="fs30 fwb cor_F23"><text class="fs34">￥{{li.price}}</text></view>
									</view>
									<view class="ml5 fs22 fwb cor_808">{{li.num}}人付款</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view v-if="dataList.length == 0" style="width: 100%;height: 100vh">
					<view style="height: 200rpx;"></view>
					<image :lazy-load="true" src="../../static/excavator.png"
						style="width: 100%; padding: 100rpx 200rpx;"></image>
					<view style="width: 100%;text-align: center;color: #808080;">暂无数据</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		datumPageApi,
		getUserInfoApi,
		getTrailerFilterApi
	} from '@/http/api.js';
	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 10,
				dataList: [],
				typeList: [],
				name: '',
				typeId: 0
			}
		},
		onLoad() {
			if (!uni.getStorageSync('userId')) {
				uni.navigateBack({
					delta: 1
				})
			}
			this.datumPage();
		},
		onShow() {
			this.getUserInfo();
		},
		onReachBottom() {
			this.pageIndex = this.pageIndex + 1
			this.datumPage();
		},
		onBackPress(options) {
		    uni.redirectTo({
		    	url: '/pages/index/index'
		    })
			return true;
		},
		methods: {
			getUserInfo() {
				let that = this;
				getUserInfoApi({
					userId: uni.getStorageSync('userId')
				}).then(res => {
					if (!res.data.beCompleteInfo) {
						uni.navigateTo({
							url: '/pages/personal_information/personal_information'
						})
					}
				}).catch(err => {})
			},


			datumPage() {
				let that = this;
				showLoading('加载中')
				datumPageApi({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize
				}).then(res => {

					that.typeList = res.data.typeList

					for (let i in res.data.dataPage.data) {
						that.dataList.push(res.data.dataPage.data[i])
					}
					console.log(that.dataList);
					hideLoading();
				}).catch(err => {
					hideLoading();
				})
			},

			toSearch() {
				uni.navigateTo({
					url: '/pages/database/search'
				})
			},

			toClassify(item) {
				uni.navigateTo({
					url: '/pages/database_classification/database_classification?typeId=' + item.id + '&name=' +
						item.name
				})
			},

			toDetail(id) {

				uni.navigateTo({
					url: '/pages/information_details/information_details?id=' + id
				})
			},


			toBack() {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f7f6f6;
	}

	.vh_top_bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 65rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
		z-index: 3;
	}

	.vh_bg {
		height: 70rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
	}

	.search_box {
		position: fixed;
		top: 65rpx;
		left: 0;
		width: 100%;
		padding: 35rpx 24rpx;
		background: linear-gradient(90deg, #F44E34 0%, #E00C09 100%);
		z-index: 3;
	}

	.menu_content_box_page {
		position: relative;
		/* height: calc(100vh - 201rpx); */
		background-color: #f7f6f6;
		padding-top: 201rpx;
	}

	.area_block_1 {
		position: relative;
		padding: 41rpx 0 25rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.area_block_3 {
		position: relative;
		padding: 20rpx 28rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.ipt_search {
		display: inline-block;
		width: 100%;
		padding: 0 15rpx 0 86rpx;
		height: 69rpx;
		line-height: 69rpx;
		font-size: 26rpx;
		text-align: left;
		color: #000;
		background-color: #fff;
		outline: none;
		border: none;
		vertical-align: top;
		border-radius: 35rpx;
	}

	.icon_search_pos {
		position: absolute;
		top: 21rpx;
		left: 44rpx;
		width: 28rpx;
		height: 28rpx;
		z-index: 2;
	}

	.see_more_btn {
		padding: 0 12rpx;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 22rpx;
		color: #fff;
		text-align: center;
		background-image: linear-gradient(90deg, #f46933, #e3140b);
		border-radius: 24rpx 0 0 24rpx;
	}

	.search_shop_item {
		width: 209rpx;
		height: 266rpx;
		background-color: #fff;
		border-radius: 6rpx;
		box-shadow: 0 0 10rpx #ccc;
		overflow: hidden;
	}

	.search_shop_item .shop_img {
		width: 100%;
		height: 162rpx;
	}
</style>
